<template>
  <!-- 表格组件 -->
  <div>
    <el-card>
      <ButtonComp :list="handleFun" @handleClick="handleOption" />
      <el-table :data="tableData" :style="{ width }" :border="border">
        <template v-for="item in tableHead">
          <!-- 数据 -->
          <el-table-column
            v-if="!item.options"
            :prop="item.prop"
            :label="item.label"
            align="center"
          >
            <template v-slot:default="{ row }">
              <span v-if="item.prop == 'roleid'">{{
                row.roleid == 1
                  ? "超级管理员"
                  : row.roleid == 2
                  ? "普通管理员"
                  : row.roleid == 3
                  ? "测试管理员"
                  : ""
              }}</span>
              <span v-if="item.prop == 'job'">{{
                row.job == 1
                  ? "主任"
                  : row.job == 2
                  ? "员工"
                  : row.job == 3
                  ? "后勤"
                  : ""
              }}</span>
              <span v-else-if="item.prop == 'gender'">{{ row.gender == 1 ? "男" : row.gender == 2 ? "女" : ''}}</span>
              <span v-else>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            align="center"
          >
            <template #default="{ row }">
              <ButtonComp
                :data="row"
                :list="item.options"
                @handleClick="handleOption"
              />
            </template>
          </el-table-column>
        </template>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        layout="->, total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<!-- vue3 表格组件（组件上方有操作按钮） -->
<script setup lang="ts">
// @ts-nocheck
import { defineProps, defineEmits, ref } from "vue";
import ButtonComp from "./ButtonComp.vue";

// 当前页
const currentPage = ref(1);
// 每页条数
const pageSize = ref(10);
const pageSizes = ref([4, 10, 20, 50]);

const emits = defineEmits([
  "handleSizeChange",
  "handleCurrentChange",
  "handleOption",
]);
/**
 * 切换每页条数
 */
const handleSizeChange = (val: number) => {
  // console.log("每页条数", val);
  emits("handleSizeChange", val);
};

/**
 * 操作按钮
 */
function handleOption(val: object) {
  // console.log('val', val);
  emits("handleOption", val);
}

/**
 * 切换当前页
 */
const handleCurrentChange = (val: number) => {
  // console.log("组件当前页", val);
  emits("handleCurrentChange", val);
};

defineProps({
  /**
   * 表格数据
   */
  tableData: {
    type: Array,
    default: () => [],
  },
  /**
   * 边框
   */
  border: {
    type: Boolean,
    default: () => true,
  },
  /**
   * 表格上方操作按钮
   */
  handleFun: {
    type: Array,
    default: () => [],
  },
  /**
   * 表格宽度
   */
  width: {
    type: String,
    default: () => "100%",
  },
  /**
   * 表头
   */
  tableHead: {
    type: Array,
    default: () => [],
  },
  /**
   * 总条数
   */
  total: {
    type: Number,
    default: () => 0,
  },
});
</script>

<style scoped lang="scss"></style>
